<!-- 支付成功详情页-审核-交货 -->
<template>
  <view class="info_page">
    <view class="banner"></view>
    <view class="con">
      <view class="header">
        <image class="icon" src="../../assets/images/pages2/reviewPage/reviewInfo/icon.png"></image>
        <view class="text">{{ billFlag == 'sign' ? '交货成功' : '审核运单成功' }}</view>
      </view>

      <!-- 审核详情  -->
      <view class="box" v-if="billFlag == 'review'">
        <view class="address">
          <view class="itme">
            <view class="top">{{ infoData?.startBranchName }}</view>
            <view class="bottom">起运地</view>
          </view>
          <view class="item">
            <image class="line" src="../../assets/images/pages2/reviewPage/reviewInfo/line.png"></image>
          </view>
          <view class="itme">
            <view class="top">{{ infoData?.destinationBranchName }}</view>
            <view class="bottom">目的地</view>
          </view>
        </view>
        <view class="re_info">
          <view class="item"><span>承运单号</span><span class="text">{{ infoData?.billNo }}</span></view>
          <view class="item"><span>下单时间</span><span class="text">{{ infoData?.billingTime }}</span></view>
          <view class="item"><span>审核时间</span><span class="text">{{ infoData?.updateTime }}</span></view>
        </view>
        <view class="btn_box">
          <view class="btn btn1" @click="toReviewPage">继续审核运单</view>
          <view class="btn btn2" @click="toHome">返回首页</view>
        </view>
      </view>

      <!-- 提货详情  -->
      <view class="box" v-if="billFlag == 'sign'">
        <view class="info">
          <view class="flex_between item"><span>承运单号</span><span>{{ infoData?.billNo || '暂无数据' }}</span></view>
          <view class="flex_between item"><span>签收人</span><span>{{ infoData?.receiver || '暂无数据' }}</span></view>
          <view class="flex_between item"><span>交货时间</span><span>{{ infoData?.updateTime || '暂无数据' }}</span></view>
          <view class="flex_between item"><span>开单处</span><span>{{ infoData?.startBranchName || '暂无数据' }}</span></view>
          <view class="flex_between item"><span>库位</span><span>{{ infoData?.locationName || '暂无数据' }}</span></view>
        </view>
        <view class="gray_bg" v-if="goodsInfo?.length !== 0 && billFlag == 'sign'">
          <view class="flex_between">
            <span class="item">货物名称</span>
            <span class="item">交货数(件)</span>
            <span class="item">剩余数(件)</span>
          </view>
          <view class="flex_between" v-for="(item, index) in goodsInfo" :key="index">
            <view class="item">{{ item.goodsName }}</view>
            <view class="item">{{ item.upNumber }}</view>
            <view class="item" :style="{ color: item.goodsNumber - item.upNumber ? '#0966FF' : '#999' }">{{
              item.goodsNumber
              - item.upNumber }}</view>
          </view>
        </view>
        <view class="btn_box">
          <view class="btn btn1" @click="toSignPage">继续交货</view>
          <view class="btn btn2" @click="toHome">返回首页</view>
        </view>
      </view>
    </view>

  </view>
</template>
    
<script lang="ts" setup>
import Taro, { useReady, useRouter } from '@tarojs/taro';
import dayjs from 'dayjs'
import { ref, reactive, onMounted } from "vue";
import useOrderStore from "@/store/order";
import { getupdateRemarksList } from "@/@api/review";

const router = useRouter()

useReady(() => {
  Taro.setNavigationBarTitle({
    title: '详情'
  })
  Taro.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#0966FF',
  });
})

const orderStore = useOrderStore()

const infoData = ref(); // 详情
const goodsInfo = ref(); // 提货详情


const billFlag = ref(); // 判断是审核还是提货

onMounted(() => {
  getRouter(); // 判断调用哪个详情接口
})

/* 判断是从哪个页面进来的 */
function getRouter() {
  if (router.params.billFlag) {
    console.log(router.params, '传来的是啥')
    billFlag.value = router.params.billFlag;
  } else {
    console.log('没鞋带参数')
  }
  getInfo();
}


// 调用详情接口（审核/提货同一个）
async function getInfo() {
  const { data } = await getupdateRemarksList({
    billNo: orderStore.orderInfo.billNo, // 285486493 
    // billNo: '285486493', 
  });
  if (data.code == 200) {
    console.log(data, '交货详情')
    const { billNo, billingTime: rawBillingTime, updateTime: rawUpdateTime, startBranchName, destinationBranchName, receiver,locationName } = data.rows[0];
    const billingTime = dayjs(rawBillingTime).format("YYYY-MM-DD HH:mm:ss");
    const updateTime = dayjs(rawUpdateTime).format("YYYY-MM-DD HH:mm:ss");
    const infoObj = { billNo, billingTime, updateTime, startBranchName, destinationBranchName, receiver,locationName }
    infoData.value = infoObj;
    goodsInfo.value = data.rows[0].goodsInfo;
  }
}

// 继续交货
function toSignPage() {
  Taro.navigateTo({
    url: '/pages2/signToday/index'
  });
}

// 继续审核
function toReviewPage() {
  Taro.navigateTo({
    url: '/pages2/reviewToday/index'
  });
}

// 返回首页
function toHome() {
  Taro.navigateTo({
    url: '/pages3/index/index'
  });
}


</script>

<style lang="scss">
* {
  box-sizing: border-box;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info_page {
  width: 750rpx;
  min-height: 100vh;
  padding-bottom: 100rpx;
  margin: 0 auto;
  background: #f5f5f5;
}

.banner {
  width: 750rpx;
  height: 600rpx;
  position: relative;
  background: url('../../assets/images/pages2/reviewPage/reviewInfo/banner.png') 750rpx 600rpx #f5f5f5;
  background-size: 100% 100%;
  top: -150rpx;
  left: 0;
  box-sizing: border-box;
}

.con {
  position: absolute;
  top: 50rpx;
  left: 50%;
  transform: translateX(-50%);
}

.header {
  text-align: center;
  padding-top: 30rpx;

  .icon {
    width: 128rpx;
    height: 128rpx;
  }

  .text {
    font-size: 44rpx;
    color: #fff;
    margin: 15rpx 0 30rpx 0;
  }
}

.btn_box {
  width: 654rpx;
  background: #fff;
  padding: 0 0 10rpx 0;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 10rpx;
}

.box {
  width: 650rpx;
  background: #fff;
  background-size: 100% 100%;
  border-radius: 10rpx;
  margin: 58rpx auto;
  text-align: center;
  padding-top: 30rpx;
  box-sizing: border-box;
  // box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.5);


  .address {
    width: 590rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .line {
      width: 142rpx;
      height: 12rpx;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .top {
      text-align: center;
      font-size: 28rpx;
      color: #252525;
    }

    .bottom {
      text-align: center;
      font-size: 24rpx;
      color: #999;
    }
  }


  .info {
    width: 606rpx;
    font-size: 26rpx;
    margin: 0 auto;

    .item {
      margin: 20rpx auto;
    }

    span:first-child {
      color: #666;
    }

    span:last-child {
      color: #252525;
    }



  }

  .re_info {
    width: 606rpx;
    height: 176rpx;
    box-sizing: border-box;
    padding: 24rpx;
    background: #F5F5F5;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #666;
    margin: 0 auto;
    margin-top: 48rpx;
    display: flex;
    flex-direction: column;

    .item {
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;

      span {
        flex: 1;
        text-align: left;
      }

      .text {
        color: #252525;
        text-align: right;
      }
    }
  }


  .gray_bg {
    width: 606rpx;
    box-sizing: border-box;
    background: #f5f5f5;
    margin: 0 auto;
    font-size: 24rpx;
    box-sizing: border-box;
    border-radius: 10rpx;

    .flex_between {
      padding: 20rpx;
      border-bottom: 1rpx solid #f2f2f2;
    }

    .flex_between:last-child {
      border-bottom: none;
    }

    .item {
      flex: 1;
      text-align: center;
      color: #252525;
    }


    span {
      color: #666;
    }
  }
}

.btn {
  width: 606rpx;
  height: 88rpx;
  border-radius: 88rpx;
  text-align: center;
  line-height: 88rpx;
  margin: 32rpx auto;
}

.btn1 {
  background: #0966FF;
  color: #fff;
}

.btn2 {
  border: 1rpx solid #C4C4C4;
  color: #252525;
  font-weight: bold;
}
</style>